<template>
	<div>
		<label>
			<input type="radio" name="status" v-model="type" value="0"/>
			全部({{ todoList.length }})
		</label>
		<label>
			<input type="radio" name="status" v-model="type" value="1"/>
			未完成({{ unFinished.length }})
		</label>
		<label>
			<input type="radio" name="status" v-model="type" value="2"/>
			已完成({{ finished.length }})
		</label>
	</div>
</template>
<script>
import { mapActions, mapState } from "pinia"
import { useTodoStore } from "../stores/todoStore"

export default {
  data(){
    return{
      type:'0'
    }
  },
	computed: {
		...mapState(useTodoStore, ["todoList"]),
		unFinished() {
      // filter() 方法用于把数组中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。
      // 此处过滤掉 item.isFinished === true 返回 item.isFinished === false
			return this.todoList.filter((item) => item.isFinished === false)
		},
		finished() {
			return this.todoList.filter((item) => item.isFinished === true)
		},
	},
  methods:{
    ...mapActions(useTodoStore,['setFilterType'])
  },
  watch:{
    type(newType){
      this.setFilterType(newType)
    }
  }
}
</script>
